﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>分级菜单</title>
    <link href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <style type="text/css">
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>
    <ul id="menu1">
        <li>
            <a href="#">操作系统</a>
            <ul>
                <li><a href="#">Windows</a></li>
                <li><a href="#">Linux</a></li>
                <li><a href="#">Unix</a></li>
            </ul>
        </li>
        <li>
            <a href="#">数据库</a>
            <ul>
                <li><a href="#">SQL Server</a></li>
                <li class="ui-state-disabled"><a href="#">Oracle</a></li>
                <li><a href="#">MySQL</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Web基础</a>
        </li>
        <li>
            <a href="#">编程语言</a>
            <ul>
                <li><a href="#">C++</a></li>
                <li><a href="#">C#</a></li>
                <li><a href="#">Java</a></li>
            </ul>
        </li>
    </ul>
    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#menu1").menu();
        })
    </script>
</body>
</html>
